<template>
  <div class="app-container">
    <SettlementLogFilter
      :commSeleList="commSeleList"
      :commCaseSeleList="commCaseSeleList"
      @on-filter="submitFilterForm"
    />
    <el-table
      border
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <el-table-column prop="settleDate" label="结算月份" align="center"></el-table-column>
      <el-table-column label="代理账号" prop="username" align="center"></el-table-column>
      <el-table-column label="姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="手续费方案(本月)" prop="feeRule" align="center">
        <template slot-scope="{row}">
          {{formatFeeRuleName(row)}}
        </template>
      </el-table-column>
      <el-table-column label="佣金方案类型" prop="commName" align="center">
        <template slot-scope="{row}">
          {{formatCommMode(row.commMode).name}}
        </template>
      </el-table-column>
      <el-table-column label="会员反佣方案(现金网)" prop="cashRule" align="center">
        <template slot-scope="{row}">
          <div v-if="row.commMode == 1">{{formatCashRuleName(row)}}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="有效会员" prop="userCount" align="center"></el-table-column>
      <el-table-column label="下级代理总数" prop="proxyCount" align="center"></el-table-column>
      <el-table-column label="公司总输赢" prop="platformComm" align="center">
        <template slot-scope="{row}">
          <el-button
            @click="openDialog({props:row,dialogName:staticDialogName2})"
            type="text">{{row.winTotal | currency}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="成本总计" prop="cost" align="center">
        <template slot-scope="{row}">
          <el-button
            @click="openDialog({props:row,dialogName:staticDialogName3})"
            type="text">{{row.cost | currency}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="累加上月" prop="lastAmount" align="center">
        <template slot-scope="{row}">
          <el-tag type="danger">{{row.lastAmount | currency}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下级会员佣金" prop="commAmount" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click="openDialog({props:row,dialogName:staticDialogName8})"
          >
            {{row.commAmount | currency}}
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="上分返利" prop="proxyComm" align="center">
        <template slot-scope="{row}">
          <el-button
            @click="openDialog({props:row,dialogName:staticDialogName9})"
            type="text"
          >
            {{row.upAmountRet | currency}}
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="下级代理佣金" prop="proxyComm" align="center">
        <template slot-scope="{row}">
          <el-button
            @click="openDialog({props:row,dialogName:staticDialogName5})"
            type="text"
          >
            {{row.proxyComm | currency}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="实际合计发放" prop="amount" align="center">
        <template slot-scope="{row}">
          {{ row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="auditStatus" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            v-if="row.status === 1"
            @click="onShowMarks(row.firstRemark, '初审备注')"
          >
            {{agencyEnum.AUDIT_REVIEW_TYPE[row.status]}}
          </el-button>
          <el-button
            type="text"
            v-else-if="row.status === 3 || row.status === 4"
            @click="onShowMarks(row.firstRemark, '初审备注')"
          >
            初审通过
          </el-button>
          <div v-else>{{agencyEnum.AUDIT_REVIEW_TYPE[row.status]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="初审时间" align="center">
        <template slot-scope="{row}">
          {{row.firstTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="初审人" align="center">
        <template slot-scope="{row}">
          {{row.firstApprover || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="终审状态" prop="auditor[1].comment" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            v-if="row.status === 3"
            @click="onShowMarks(row.secondRemark, '终审备注')"
          >
            {{agencyEnum.AUDIT_REVIEW_TYPE[row.status]}}
          </el-button>
          <div v-else-if="row.status === 1">待终审</div>
          <div v-else-if="row.status === 2">--</div>
          <div v-else>{{agencyEnum.AUDIT_REVIEW_TYPE[row.status]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="终审时间" prop="auditor[1].comment" align="center">
        <template slot-scope="{row}">
          {{row.secondTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="终审人" prop="auditor[1].name" align="center">
        <template slot-scope="{row}">
          {{row.secondApprover || '--'}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <el-tip style="padding: 50px 0 10px 0;">
      <p> 注1：“公司总输赢”红色负数代表会员盈利，绿色正数代表公司盈利</p>
      <p> 注2:【公司总输赢】投注金额-派彩金额</p>
      <p>   &nbsp;【成本总计】{（游戏输赢*平台费）"公司输则平台费用为0"}+红利+返水+存提款手续费</p>
      <p>   &nbsp;【累加上月】上月公司总输赢-成本总计</p>
      <p>   &nbsp;【公司净输赢】公司总输赢-成本总计 </p>
      <p>   &nbsp;【下级会员佣金】（公司净输赢+累加上月）*佣金比例 </p>
      <p>   &nbsp;【下级代理佣金】下级代理佣金总额*提成比例</p>
      <p>   &nbsp;【实际发放】当下级会员佣金为负数的时候，实际发放金额=下级代理佣金+上分返利</p>
      <p>   &nbsp; 当下级会员佣金为正数的时候，实际发放金额=下级会员佣金+下级代理佣金+上分返利</p>
      <p> 注3: 代理佣金数据每个小时，会定时结算一次最新的数值。每个月5号凌晨3点，统一结算上个月的佣金，结算后无法再次更改 </p>
    </el-tip>
    <game-commission-dialog
      v-if="dialogName === staticDialogName2"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"/>
    <apportion-commission-dialog
      v-if="dialogName === staticDialogName3"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"/>
    <sub-commision-dialog
      v-if="dialogName === staticDialogName5"
      v-model="dialogVisible"
      :id="dialogProps.id"
      @submit="submitFinished"/>
    <el-dialog :visible.sync="statusDialog.visible" width="70%">
      <template slot="title">
        {{statusDialog.title}}
      </template>
      <p>{{statusDialog.content}}</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusDialog.visible=false">确定</el-button>
      </div>
    </el-dialog>
    <next-member-commission-dialog
      v-if="dialogName === staticDialogName8"
      v-model="dialogVisible"
      :detail="dialogProps"/>
    <add-points-rebate
      v-if="dialogName === staticDialogName9"
      v-model="dialogVisible"
      :detail="dialogProps"/>
  </div>
</template>

<script>

// constants
import { FILTER_ALL_TYPE } from '@/const/agencyEnum';

// utils
import { formatCommMode } from '@/utils/base';

// components
import GameCommissionDialog from './gameCommissionDialog';
import ApportionCommissionDialog from './apportionCommissionDialog';
import SubCommisionDialog from './subCommissionDialog';
import SettlementLogFilter from './logFilter';
import nextMemberCommissionDialog from './nextMemberCommissionDialog';
import AddPointsRebate from './addPointsRebate';

// service
import {
  getCommissionFinishList,
  getCommissionAuditor,
  getCommissionSelect,
  getCommissionCaseSelectList,
} from '@/services/api/commission';

// mixins
import { grid, dialog } from '@/build';

export default {
  name: 'commission-settlement-logs',
  components: {
    SettlementLogFilter,
    nextMemberCommissionDialog,
    ApportionCommissionDialog,
    GameCommissionDialog,
    SubCommisionDialog,
    AddPointsRebate,
  },
  mixins: [grid, dialog],
  data() {
    return {
      tableData: {
        list: [],
      },
      auditor: [],
      filters: {
        size: 20,
        page: 1,
        searchType: 1,
        startMonth: moment().subtract(1, 'months').format('YYYY-MM'),
        endMonth: moment().format('YYYY-MM'),
      },
      dialogVisible: false,
      staticDialogName: 'commission-audit-dialog',
      staticDialogName2: 'game-commission-dialog',
      staticDialogName3: 'apportion-commission-dialog',
      staticDialogName4: 'adjust-commission-dialog',
      staticDialogName5: 'sub-commission-dialog',
      staticDialogName8: 'next-member-commission-dialog',
      staticDialogName9: 'add-points-rebate',
      statusDialog: {
        title: '',
        content: '',
        visible: false,
      },
      commSeleList: [],
      commCaseSeleList: [],
    };
  },
  methods: {
    formatCommMode,
    formatFeeRuleName(row) {
      if (!this.commSeleList.length) return null;
      const { name } = this.commSeleList.find(item => item.id === row.feeRule) || {};
      return name;
    },
    formatCashRuleName(row) {
      if (!this.commCaseSeleList.length) return null;
      const { name } = this.commCaseSeleList.find(item => item.id === row.cashRule) || {};
      return name;
    },
    submitFilterForm(formInline) {
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
    onShowMarks(content, title) {
      this.statusDialog = {
        title,
        content,
        visible: true,
      };
    },
  },
  mounted() {
    this.bindGet(getCommissionSelect, 'commSeleList', {
      format: (data) => {
        if (!(Array.isArray(data) && data.length)) return [];
        data.unshift(FILTER_ALL_TYPE);
        return data;
      },
    });
    this.bindGet(getCommissionCaseSelectList, 'commCaseSeleList', {
      format: (data) => {
        if (!(Array.isArray(data) && data.length)) return [];
        data.unshift(FILTER_ALL_TYPE);
        return data;
      },
    });
    this.bindGet(getCommissionAuditor, 'auditor', {});
    this.bindGet(getCommissionFinishList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
